{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
<link href="__ZUI__/lib/colorpicker/zui.colorpicker.min.css" rel="stylesheet">
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>颜色选择器</li>
  </ol>
<section class="demo-section">
<div id="pageContent">



<section>
  <header><h3>按钮选择器</h3></header>
  <article>
    <p>
      为 <code>&lt;input type="hidden"&gt;</code> 设置 <code>[data-provide="colorpicker"]</code> 属性将以按钮的形式设置颜色值。所设置的颜色值会同步更新到 <code>&lt;input&gt;</code> 中，通过获取 <code>&lt;input&gt;</code> 的 <code>value</code> 属性值将会得到所选的颜色值。
    </p>

    <div class="example">
      <!-- 按钮选择器 -->
      <input type="hidden" class="form-control" id="myColor2" name="myColor2" data-provide="colorpicker" value="#3280fC" data-pull-menu-right="false" data-btn-tip="主题颜色">
    </div>

<pre class="prettyprint prettyprinted" style="">
  <code class="lang-html"><span class="com">&lt;!-- 按钮选择器 --&gt;</span><span class="pln">
</span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"hidden"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myColor2"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"myColor2"</span><span class="pln"> </span><span class="atn">data-provide</span><span class="pun">=</span><span class="atv">"colorpicker"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"#3280fC"</span><span class="pln"> </span><span class="atn">data-pull-menu-right</span><span class="pun">=</span><span class="atv">"false"</span><span class="pln"> </span><span class="atn">data-btn-tip</span><span class="pun">=</span><span class="atv">"主题颜色"</span><span class="tag">&gt;</span>
</code>
</pre>
</article>
</section>




<section>
  <header><h3>使用输入组</h3></header><article><p>将 <code>&lt;input type="text"&gt;</code> 放置在 <code>div class="input-group"&gt;</code> 中，并为 <code>&lt;input&gt;</code> 设置 <code>data-wrapper="input-group-btn"</code> 属性即可，这样为用户提供一个输入十六进制颜色值的文本框。用户自定义的颜色值将会追加到颜色菜单末尾以供重复选择。</p>
    <div class="example">
  <div class="row">
    <div class="col-sm-6">

      <!-- 使用输入组并提供输入框输入十六进制颜色值 -->
      <div class="input-group">
        <input type="text" class="form-control" id="myColor3" name="myColor3" data-provide="colorpicker" data-wrapper="input-group-btn" data-pull-menu-right="true" value="#3280fC" placeholder="请输入16进制颜色值，例如 #FF00DD">
      </div>
    </div>

    <div class="col-sm-6">
      <!-- 使用输入组并提供输入框输入十六进制颜色值 -->
      <div class="input-group">
        <span class="input-group-addon">主题颜色</span>
        <input type="text" class="form-control" id="myColor3" name="myColor3" data-provide="colorpicker" data-wrapper="input-group-btn" data-pull-menu-right="true" value="#3280fC" placeholder="请输入16进制颜色值，例如 #FF00DD">
      </div>
    </div>
  </div>
</div>

<pre class="prettyprint prettyprinted" style="">
    <code class="lang-html"><span class="com">&lt;!-- 使用输入组并提供输入框输入十六进制颜色值 --&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group-addon"</span><span class="tag">&gt;</span><span class="pln">主题颜色</span><span class="tag">&lt;/span&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myColor3"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"myColor3"</span><span class="pln"> </span><span class="atn">data-provide</span><span class="pun">=</span><span class="atv">"colorpicker"</span><span class="pln"> </span><span class="atn">data-wrapper</span><span class="pun">=</span><span class="atv">"input-group-btn"</span><span class="pln"> </span><span class="atn">data-pull-menu-right</span><span class="pun">=</span><span class="atv">"true"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"#3280fC"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"请输入16进制颜色值，例如 #FF00DD"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span></code>
</pre>
</article>
</section>





<section>
  <header><h3>自定义预设颜色</h3></header><article><p>使用 <code>colors</code> 选项来自定义预设的颜色。当使用 <code>[data-colors]</code> 时，将多个颜色值用逗号进行分隔。</p><div class="example">
    <input type="hidden" class="form-control" id="myColor4" name="myColor4" data-provide="colorpicker" value="#3280fC" data-colors="#fff,#000,#3280fC,red">
  </div>

<pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"hidden"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myColor4"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"myColor4"</span><span class="pln"> </span><span class="atn">data-provide</span><span class="pun">=</span><span class="atv">"colorpicker"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"#3280fC"</span><span class="pln"> </span><span class="atn">data-colors</span><span class="pun">=</span><span class="atv">"#fff,#000,#3280fC,red"</span><span class="tag">&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 手动初始化时，也可以使用数组来定于预设颜色</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'.input-group #myColor'</span><span class="pun">).</span><span class="pln">colorpicker</span><span class="pun">({</span><span class="pln">
    colors</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'#fff'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'#000'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'#3280fC'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'red'</span><span class="pun">]</span><span class="pln">
</span><span class="pun">});</span></code></pre></article></section>




<section><header><h3>自定义按钮图标</h3></header><article><p>使用 <code>icon</code> 选项来自定义预设的颜色。可供使用的图标参见 <a href="#control/icon">控件 - 图标</a> 章节。</p><div class="example">
  <div class="row">
    <div class="col-sm-6">
      <div class="input-group">
        <input type="text" class="form-control" id="myColor5" name="myColor5" data-wrapper="input-group-btn" data-provide="colorpicker" data-pull-menu-right="true" value="#3280fC" data-icon="ellipsis-v" data-toggle="tooltip" data-original-title="" title="">
      </div>
    </div>
    <div class="col-sm-6">

      <input type="hidden" class="form-control" id="myColor6" name="myColor6" value="#3280fC" data-provide="colorpicker" data-pull-menu-right="false" data-icon="tint" data-original-title="" title="">

      <input type="hidden" class="form-control" id="myColor7" name="myColor7" value="#3280fC" data-provide="colorpicker" data-pull-menu-right="false" data-icon="star" data-original-title="" title="">

    </div>
  </div>
</div>

<pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"hidden"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myColor3"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"myColor3"</span><span class="pln"> </span><span class="atn">data-provide</span><span class="pun">=</span><span class="atv">"colorpicker"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"#3280fC"</span><span class="pln"> </span><span class="atn">data-icon</span><span class="pun">=</span><span class="atv">"tint"</span><span class="tag">&gt;</span></code></pre></article></section>




<section>
  <header><h3>同步更新</h3></header>
  <article><p>使用 <code>update-*</code> 选项来为页面上的其他元素更新颜色或文本。</p>

    <div class="example">
    <input type="hidden" class="form-control" id="myColor8" name="myColor8" data-provide="colorpicker" value="#3280fC"  data-pull-menu-right="false" data-update-text="#myColor4Label" data-update-color="#myColor4Label">
    <span>你刚刚选择了颜色：<strong id="myColor4Label"></strong></span>
    </div>

<pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"hidden"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myColor8"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"myColor8"</span><span class="pln"> </span><span class="atn">data-provide</span><span class="pun">=</span><span class="atv">"colorpicker"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"#3280fC"</span><span class="pln">  </span><span class="atn">data-pull-menu-right</span><span class="pun">=</span><span class="atv">"false"</span><span class="pln"> </span><span class="atn">data-update-text</span><span class="pun">=</span><span class="atv">"#myColor4Label"</span><span class="pln"> </span><span class="atn">data-update-color</span><span class="pun">=</span><span class="atv">"#myColor4Label"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;div&gt;</span><span class="pln">你刚刚选择了颜色：</span><span class="tag">&lt;strong</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myColor4Label"</span><span class="tag">&gt;&lt;/strong&gt;&lt;/div&gt;</span></code></pre></article></section>


<section><header><h3>使用方法</h3></header><article><h4>引入资源</h4><p>颜色选择器为独立组件，你需要从本地或 CDN 单独引入 lib 目录下的资源：</p><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"lib/colorpicker/zui.colorpicker.min.css"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"lib/colorpicker/zui.colorpicker.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span></code></pre><h4>初始化</h4><p>使用 <code>[data-provide="colorpicker"]</code> 属性初始化，通过 <code>[data-*]</code> 来指定初始化选项。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"hidden"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myColor2"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"myColor2"</span><span class="pln"> </span><span class="atn">data-provide</span><span class="pun">=</span><span class="atv">"colorpicker"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"#3280fC"</span><span class="tag">&gt;</span></code></pre><p>使用 JavaScript 代码手动初始化，允许在调用初始化函数的同时传入初始化选项。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'.input-group #myColor'</span><span class="pun">).</span><span class="pln">colorpicker</span><span class="pun">({</span><span class="pln">
    wrapper</span><span class="pun">:</span><span class="pln"> </span><span class="str">'.input-group-btn'</span><span class="pln">
</span><span class="pun">});</span></code></pre><p></p><h4>选项</h4><p>所有可用的初始化选项：</p><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th style="width: 100px">选项</th>
      <th style="width: 120px">名称</th>
      <th style="width: 180px">可选值</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>colors</code></td>
      <td>预设颜色列表</td>
      <td>用逗号分隔的十六进制颜色字符串，或者包含十六进制颜色的数组，默认值为 <code style="word-break:break-all; white-space: normal">['#00BCD4', '#388E3C', '#3280fc', '#3F51B5', '#9C27B0', '#795548', '#F57C00', '#F44336', '#E91E63']</code></td>
      <td></td>
    </tr>
    <tr>
      <td><code>pullMenuRight</code></td>
      <td>下拉菜单是以右侧对齐</td>
      <td><code>true</code>（默认），<code>false</code></td>
      <td></td>
    </tr>
    <tr>
      <td><code>wrapper</code></td>
      <td>下拉按钮父元素的 CSS CLASS</td>
      <td>默认为 <code>'btn-wrapper'</code></td>
      <td>当使用输入组形式时，应该讲此选项设置为 <code>'input-group-btn'</code></td>
    </tr>
    <tr>
      <td><code>tileSize</code></td>
      <td>颜色方块大小</td>
      <td>默认值 <code>30</code>，单位像素</td>
      <td>下拉菜单中的颜色选择方块都是正方形，这里会同时定义宽和高</td>
    </tr>
    <tr>
      <td><code>lineCount</code></td>
      <td>每行颜色方块的数目</td>
      <td>默认值 <code>5</code></td>
      <td>预设颜色超过此数目则在新的一行显示</td>
    </tr>
    <tr>
      <td><code>optional</code></td>
      <td>是否允许空值</td>
      <td><code>true</code>（默认），<code>false</code></td>
      <td>如果设置为 <code>false</code>，则不会在下拉菜单中显示清除颜色的按钮，但不会阻止用户手动设置 <code>&lt;input&gt;</code> 值为空</td>
    </tr>
    <tr>
      <td><code>icon</code></td>
      <td>按钮上的图标</td>
      <td>默认值 <code>'caret-down'</code></td>
      <td></td>
    </tr>
    <tr>
      <td><code>btnTip</code></td>
      <td>按钮提示文本</td>
      <td>默认值 <code>null</code></td>
      <td>当鼠标悬停在按钮上时显示的提示消息内容</td>
    </tr>
    <tr>
      <td><code>tooltip</code></td>
      <td>是否显示提示消息</td>
      <td><code>'top'</code>（默认）、<code>'bottom'</code>、<code>'left'</code>、<code>'right'</code>和<code>false</code></td>
      <td>提示消息显示的位置，如果设置为 <code>false</code>，则不显示提示消息</td>
    </tr>
    <tr>
      <td><code>errorTip</code></td>
      <td>错误格式提示消息</td>
      <td>中文环境下默认值为：<code>'不是有效的颜色值'</code></td>
      <td>当使用输入组形式时，如果文本框中值不是有效的十六进制颜色值时会提示此消息</td>
    </tr>
    <tr>
      <td><code>updateColor</code></td>
      <td>同步更新文本颜色</td>
      <td>有效的 CSS 选择器，默认不设置</td>
      <td>当颜色选择器的值被更改时，该值所指示的目标元素会同步更新文本颜色为当前值</td>
    </tr>
    <tr>
      <td><code>updateBorder</code></td>
      <td>同步更新边框颜色</td>
      <td>有效的 CSS 选择器，默认不设置</td>
      <td>当颜色选择器的值被更改时，该值所指示的目标元素会同步更新边框颜色为当前值</td>
    </tr>
    <tr>
      <td><code>updateBackground</code></td>
      <td>同步更新背景颜色</td>
      <td>有效的 CSS 选择器，默认不设置</td>
      <td>当颜色选择器的值被更改时，该值所指示的目标元素会同步更新背景颜色为当前值</td>
    </tr>
    <tr>
      <td><code>updateText</code></td>
      <td>同步更新文本内容</td>
      <td>有效的 CSS 选择器，默认不设置</td>
      <td>当颜色选择器的值被更改时，该值所指示的目标元素会同步更新文本内容为当前值</td>
    </tr>
    <tr>
      <td><code>lang</code></td>
      <td>语言选项</td>
      <td><code>'zh-cn'</code>, <code>'zh-tw'</code>, <code>'en'</code></td>
      <td>一般不需要手动设置，默认会根据 <code>&lt;html&gt;</code> 上的 <code>lang</code> 属性自动设置</td>
    </tr>
  </tbody>
</table></div><h4>监听值更改事件</h4><p>为 <code>&lt;input&gt;</code> 绑定 <code>change</code> 事件即可。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#myColor'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'change'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'新设置的颜色值是 '</span><span class="pun">,</span><span class="pln"> $</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">val</span><span class="pun">());</span><span class="pln">
</span><span class="pun">});</span></code></pre><h4>方法</h4><p>可用的方法：</p><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th>方法</th>
      <th>参数</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>addColor(color)</code></td>
      <td><code>color</code>：十六进制颜色值</td>
      <td>在预设的颜色中增加一个新的颜色</td>
    </tr>
    <tr>
      <td><code>updateColors(colors)</code></td>
      <td><code>colors</code>：十六进制颜色值数组</td>
      <td>重新设置所有预设的颜色</td>
    </tr>
    <tr>
      <td><code>setValue(color)</code></td>
      <td><code>colors</code>：十六进制颜色值</td>
      <td>设置当前选中的颜色值，如果所设置的颜色不在预设颜色列表中，则将该颜色增加到预设颜色中</td>
    </tr>
  </tbody>
</table></div><p>调用方法：</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 获取 colorpicker 实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> colorPicker </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#myColor'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.colorPicker'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 设置预设颜色</span><span class="pln">
colorPicker</span><span class="pun">.</span><span class="pln">updateColors</span><span class="pun">([</span><span class="str">'#FFF'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'red'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'#F8E800'</span><span class="pun">]);</span><span class="pln">

</span><span class="com">// 增加一种预设的颜色</span><span class="pln">
colorPicker</span><span class="pun">.</span><span class="pln">addColor</span><span class="pun">(</span><span class="str">'#808080'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 设置当前颜色</span><span class="pln">
colorPicker</span><span class="pun">.</span><span class="pln">setValue</span><span class="pun">(</span><span class="str">'#FFF'</span><span class="pun">);</span></code></pre></article></section></div>
</section>
{/block}

{block name="script"}

<script src="__ZUI__/lib/colorpicker/zui.colorpicker.min.js"></script>
<script>
$(function() {
    $('#pageContent [data-provide="colorpicker"]').colorPicker();
});
</script>
{/block}